<template>
	<view class="orderPage">
		<n-loading></n-loading>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF5238" :bold="false"
		 inactive-color="#666666" class="tabs"></u-tabs>
		 <view class="orderListBox">
			 <view class="nodata" v-if="orderList.length==0">
			 	<image src="../../static/svgIcon/noOrder.svg" mode=""></image>
			 	<view class="tips">暂无订单~</view>
			 </view>
			<view class="eachOrder" v-for="(item,index) of orderList" :key="index">
				<view class="store">
					<dh-image class="shopLogo" :src="item.store.logo"
					 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					 <view class="shopName">{{item.store.name}}</view>
					 <view class="orderState" :class="{orderState1:item.is_verification==1}">{{item.is_verification==0?'未使用':'已使用'}}</view>
				</view>
				<view class="goodsInfoBox">
					<dh-image class="goodsImg" :src="item.goods.image" 
					errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="goodsCont">
						<view class="info">下单时间：{{getdate(item.created_at,0)}}</view>
						<view class="info" v-if="item.is_verification==0">有效期至：{{getdate(item.goods.virtual_validity,0)}}</view>
						<view class="info">数量：1</view>
						<view class="info">实付：￥{{item.order.pay_amount}}</view>
					</view>
				</view>
				<view class="btnBox">
					<view class="btn btn1" v-if="item.is_verification==0" @tap="useInStore(item.id)">到店使用</view>
					<view class="btn btn2" v-if="item.is_verification==1" @tap="oneMore(item.goods_id)">再来一单</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待使用'
				}, {
					name: '已完成'
				}],
				current: null,
				// 订单列表
				orderList:[],
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				
			}
		},
		onShow(){
			this.orderList = [];
			this.page = 1;
			this.getOrderList();
		},
		onLoad(option) {
			this.current = option.tab;
		},
		methods:{
			// 获取订单列表
			getOrderList(){
				this.apiget('/fun/order-virtual/index',{page:this.page,pageSize:this.pageSize,is_verification:this.current}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderList = this.orderList.concat(res.data.data.list);
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			change(index) {
				this.orderList = [];
				this.page = 1;
				this.current = index;
				this.getOrderList()
			},
			// 去核销
			useInStore(id){
				uni.navigateTo({
					url: './writeOff?id='+id
				});
			},
			// 再来一单
			oneMore(id){
				uni.navigateTo({
					url: '../index/goodsInfo?id='+id
				});
			},
		}
	}
</script>

<style lang="scss">
	.orderPage {
		min-height: 100%;
		background-color: #F8F8FA;
	}
	.tabs {
		position: fixed;
		// #ifndef MP-WEIXIN
		top: 80rpx;
		// #endif
		// #ifdef MP-WEIXIN
		top: 0;
		// #endif
		left: 0;
		right: 0;
		z-index: 20;
	}
	.orderListBox{
		padding: 112rpx 32rpx 32rpx;
		
		.eachOrder{
			padding: 0 24rpx;
			margin-bottom: 16rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 16rpx rgba(255, 82, 56, 0.02);
			border-radius: 16rpx;
			
			.store{
				display: flex;
				align-items: center;
				padding: 34rpx 0 18rpx;
				box-shadow: inset 0px -0.5px 0px #F0F0F0;
				
				.shopLogo{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.shopName{
					flex: 1;
					width: 1px;
					font-size: 28rpx;
					font-weight: bold;
				}
				.orderState{
					font-size: 24rpx;
					color: #FF5238;
				}
				.orderState1{
					color: #333333;
				}
			}
			
			.goodsInfoBox{
				padding: 24rpx;
				display: flex;
				
				.goodsImg{
					width: 120rpx;
					height: 120rpx;
					margin-right: 24rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
				.goodsCont{
					flex: 1;
					width: 1px;
					
					.info{
						font-size: 24rpx;
						line-height: 40rpx;
					}
				}
			}
			.btnBox{
				padding-bottom: 24rpx;
				text-align: right;
				
				.btn{
					display: inline-block;
					width: 160rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					border-radius: 30rpx;
				}
				.btn1{
					color: #FF5238;
					border: 2rpx solid #FF5238;
				}
				.btn2{
					color: #666666;
					border: 2rpx solid #999999;
				}
			}
		}
	}
</style>
